<template>
  <view class="login-page">
    <!-- 登录表单 -->
    <view class="login-form">
      <view class="logo">
        <image src="/static/logo.png" mode="aspectFit"></image>
      </view>
      
      <view class="form-item">
        <uni-icons type="person" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.username" 
          placeholder="请输入用户名/手机号" 
        />
      </view>
      
      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.password" 
          placeholder="请输入密码" 
          password
        />
      </view>
      
      <view class="forgot-pwd" @click="goForgotPwd">
        <text>忘记密码?</text>
      </view>
      
      <view class="login-btn" @click="handleLogin">
        <text>登录</text>
      </view>
      
      <view class="register-tip">
        <text>还没有账号?</text>
        <text class="register-btn" @click="goRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      if (!this.formData.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '登录中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        // 模拟登录成功
        uni.setStorageSync('token', 'mock_token')
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
      }, 1000)
    },
    goForgotPwd() {
      uni.navigateTo({
        url: '/pages/login/forgot'
      })
    },
    goRegister() {
      uni.navigateTo({
        url: '/pages/login/register'
      })
    }
  }
}
</script>

<style>
.login-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
}
.login-form {
  width: 80%;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
}
.logo {
  display: flex;
  justify-content: center;
  margin-bottom: 60rpx;
}
.logo image {
  width: 200rpx;
  height: 200rpx;
}
.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
}
.input {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
}
.forgot-pwd {
  text-align: right;
  margin-bottom: 40rpx;
}
.forgot-pwd text {
  font-size: 24rpx;
  color: #999;
}
.login-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-bottom: 30rpx;
}
.register-tip {
  text-align: center;
  font-size: 24rpx;
  color: #999;
}
.register-btn {
  color: #ff2d4a;
  margin-left: 10rpx;
}
</style>